<template>
	<view class="page">
		<block v-if="isdata">
			<view class="u-pa1 fix-titlenview-trans" >
				<view class="m-banner-ad">
					<swiper indicator-dots="true" autoplay="true" interval="3000" duration="300">
						<swiper-item>
							<image
								lazy-load
								class="slide-image"
								mode="aspectFill"
								:src="activityInfo.activity_rule.giftbag_zu_image"
								:data-src="activityInfo.activity_rule.giftbag_zu_image"
								@click="previewProductImg"
							/>
						</swiper-item>
					</swiper>
					<navigator v-if="activityInfo.activity_rule.activity_video" :url="activityInfo.activity_rule.activity_video" class="video">
						<image lazy-load src="/static/images/play.png" style="width:100rpx;height:100rpx"></image>
					</navigator>
				</view>

				<view class="m-activity-info">
					<view class="m-activity-title">
						<label>{{(activityInfo.activity_rule.activity_bag_category)}}</label>
					</view>
					<view class="m-activity-tips">
						<label>{{(activityInfo.activity_name)}}</label>
					</view>
					<view class="m-activity-price">
						<view>
							<label style="color:#c0a080;">{{ __('￥') }}{{ number_format(activityInfo.activity_rule.giftbag_amount, 2) }}</label>
							<label class="old-price" v-if="(activityInfo.activity_rule.giftbag_amount < activityInfo.activity_rule.subtotal)">{{ __('￥') }}{{ number_format(activityInfo.activity_rule.subtotal, 2) }}</label>
						</view>
						<!-- <view>
							<label class="m-imfo-sp-selext">
								<view class="u-cart-num">
									<view class="u-num-btn" @click.stop="sub">-</view>
									<input type="number" v-model="numval" @blur="writenum" />
									<view class="u-num-btn" @click.stop="add">+</view>
								</view>
							</label>
						</view> -->
					</view>
				</view>

				<view class="product-l">
					<navigator url="/activity/giftbag/list"
					 class="m-cell m-cell-access">
						<view class="m-cell-bd m-cell-primary">
							<p>{{__('礼包包含以下商品')}}</p>
						</view>
						<text class="ft-title">{{__('更多礼包')}}</text><text class="m-cell-ft"></text>
					</navigator>
					<scroll-view  class="scroll-view_H" scroll-x="true">
						<block v-if="(activityInfo.items)">
							<view class="scroll-view-item_H" v-for="(item,index) in activityInfo.items" :key="index" >
								<view>
									<view hover-class="none" :data-pid="(item.item_id)" :data-state="(item.product_state_id)" @click="gotoDetail">
										<view class="product-l-img">
											<image style="width:100%;height:100%" :src="item.product_image" />
										</view>

										<view class="product-l-price">
											<view class="product_name">
												<label>{{item.product_name}}</label>
											</view>
											<view class="price-new" style="color:#c0a080;">
												<label>{{ __('￥') }}{{ number_format(item.item_unit_price, 2) }}</label>
                        <label style="margin-left: 10rpx">x {{ (item.activity_item_num) }}</label>
											</view>
										</view>
									</view>
								</view>
							</view>
						</block>
						<block v-else>
							<view class="m-nullpage-middle">
								<view class="m-null-tip">
									<text>{{ __('什么都没有！') }}</text>
								</view>
							</view>
						</block>
					</scroll-view>
				</view>
<!--
				<view class="m-cell m-cell-access " style="background-color:  #FFFFFF;;">
					<view class="m-info-sp">
						<label class="m-info-tip" style="float:left;">{{__('库存：')}}{{activityInfo.activity_rule.giftbag_quantity}}</label>

						<label class="m-imfo-sp-selext" style="float:left;height: 48rpx;margin-left: 30rpx;">
							<view class="u-cart-num">
								<view class="u-num-btn" @click.stop="sub">-</view>
								<input type="number" v-model="numval" @blur="writenum" />
								<view class="u-num-btn" @click.stop="add">+</view>
							</view>
						</label>

					</view>
				</view> -->

				<view class="m-panel m-panel-access m-detail">
					<view class="m-tab">
						<view class="m-navbar">
							<view class="m-navbar-item m-navbar-item-on" v-if="(activityInfo.activity_base.activity_remark)">
								{{__('活动详情')}}
							</view>
						</view>
					</view>
					<view class="m-RichText" v-if="activityInfo.activity_base.activity_remark">
						<wxParse :content="activityInfo.activity_base.activity_remark" />
					</view>
				</view>
				<view style="width:100%;height:100rpx;"></view>
			</view>



			<view class="m-footer-btn m-fg-btn" >
				<view class="m-footer-btn-list" style="width:100%">
					<!-- <view class="m-footer-btn-item" style="width:92rpx;">
						<view class="u-go-home1" @click="onShareBox">
							<view class="m-footer-btn-icon">
								<image src="../../static/images/share.png"/>
							</view>
							<text style="font-size: 20rpx;">{{__('分享')}}</text>
						</view>
					</view> -->
					<block v-if="(activityInfo.activity_state == 0)">
						<view class="m-footer-btn-main m-footer-desable" style="width: 100%;">
							{{__('活动未开启')}}
						</view>
					</block>
					<block v-else>
						<view v-if="false" class="m-footer-btn-main" style="background:linear-gradient(to right, #dbc4aa, #ba9877);" @click="ckselectsp">
							{{__('加入购物车')}}
						</view>
						<view class="m-footer-btn-main m-footer-desable" v-if="((activityInfo.activity_rule.giftbag_quantity - activityInfo.activity_effective_quantity) <= 0)">
							{{__('库存不足')}}
						</view>
						<view class="m-footer-btn-main" style="background-color: #333959;" v-else @click="goCheckout">
							{{__('立即购买')}}
						</view>
					</block>

				</view>


			</view>
		</block>
		<view class="m-nullpage" v-else>
			<view class="m-nullpage-middle" v-if="loaded">
				<label class="iconfont icon-meiyougengduo"></label>
				<view class="m-null-tip">
					<text>{{ __('什么都没有！') }}</text>
				</view>
			</view>
			<view class="m-nullpage-middle" v-else><loading></loading></view>
		</view>

		<!-- #ifdef APP-PLUS -->
		<share-box-app :shareDataDefault="shareData" ref="shareBoxApp"></share-box-app>
		<!-- #endif -->

		<!-- #ifdef H5 -->
		<share-box-h5 :shareDataDefault="shareData" ref="shareBoxH5"></share-box-h5>
		<!-- #endif -->

		<!-- #ifndef APP-PLUS -->
		<share-box-mp
			:shareDataDefault="shareData"
			@cancelShare="cancelShare"
			@showCodeImg="showCodeImg"
			@shareQRCode="shareQRCode"
			@saveImg="saveImg"
			ref="shareBoxMp"
		></share-box-mp>
		<!-- #endif -->

    <liu-customize-sel ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
                       @change='onDistrictConfirm'></liu-customize-sel>

		<!-- <quick-nav @onReturnTop="onReturnTop" @onShareBox="onShareBox" :isquicknav="isquicknav"></quick-nav> -->
	</view>
</template>

<script>
function getNowFormatDate() {
	var e = new Date(),
		t = '-',
		n = e.getMonth() + 1,
		r = e.getDate();
	n >= 1 && n <= 9 && (n = '0' + n), r >= 0 && r <= 9 && (r = '0' + r);
	var i = e.getFullYear() + t + n + t + r;
	return i;
}

import wxParse from '@/components/u-parse/u-parse.vue';

import shareBoxMp from '../../components/share-box-mp.vue';
import shareBoxApp from '../../components/share-box-app.vue';
import shareBoxH5 from '../../components/share-box-h5.vue';

import quickNav from '../../components/quick-nav.vue';
import headerNavMenu from '../../components/header-nav-menu.vue';

import uniBadge from '../../components/uni-badge.vue';
import uniTag from '@/components/uni-tag/uni-tag.vue';
import loading from '@/components/loading.vue';

var intervalDate;
var intervalPt;
var intervalCt;
var intervalTimeAct;

import { mapState, mapMutations } from 'vuex';

export default {
	data() {
		return {
			options: {},
			activity_id: 0,
			activityInfo: {
        items:[],
        activity_base:{},
        activity_rule:{}
      },
			loaded: true,
			isdata: false,

			numval: 1,
			stock: 1,
			inputval: 1,

			scposition: 0,
			old: {
				scposition: 0
			},

			shareData: {
				shareText: 'GDF商城系统，支持原生App、微信小程序，邀请你一起体验！',
				shareTitle: 'GDF商城系统，支持原生App、微信小程序，邀请你一起体验！',
				href: 'https://www.suteshop.com',
				image: '',
				price: 0
			},

			cityPickerValueDefault: [0, 0, 0],
			themeColor: '#007AFF',
			product_freight_info: { content: '无货', district_info: '上海市/上海市', if_store: false },

			latitude: '',
			longitude: '',

			ispage: true,

			uid: 0,

			isquicknav: false
		};
	},

	components: {
		shareBoxMp,
		shareBoxApp,
		shareBoxH5,
		quickNav,
		uniBadge,
		wxParse,
		uniTag,
		loading,
		headerNavMenu
	},
	computed: {
		...mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin', 'cartNum'])
	},
	onLoad: function(options) {
		uni.setNavigationBarTitle({
			title: this.__('礼包详情')
		});

		var that = this;

		if (options.aid) {
			this.setData({
				activity_id: options.aid
			});
			that.initData();
		}

		if(options.uid)
		{
			this.setData({
				uid: options.uid
			});

			if(this.hasLogin)
			{
			}

		}
	},

	methods: {
		...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo', 'setCartNum']),
		initData: function(options) {
			var that = this;
			var params = {
				activity_id: this.activity_id
			};

			that.$.request({
				url: that.Config.URL.marketing.getActivityInfo,
				data: params,
				success: function(data, status, msg, code) {
					if (200 == status) {
            const activityBase = data.activity_base;
            let info = {};
            info["items"] = data.items
            info["activity_base"] = activityBase;
            
            const activity_rule = JSON.parse(data.activity_base.activity_rule);
            info["activity_rule"] = activity_rule.giftbag;

            let subtotal = 0;
            //计算商品原价小计
            for (var i = 0; i < data.items.length; i++) {
              subtotal = subtotal + data.items[i]['item_unit_price'] * data.items[i]['activity_item_num'];
            }

            if (activityBase.activity_type_id == that.StateCode.ACTIVITY_TYPE_GIFTBAG) {
              info["activity_rule"].subtotal = subtotal;
            }
            
						that.setData({
							isdata: true,
							ispage: true,
							loaded: true,
							activityInfo: info
						});
					} else {
						that.setData({ flag: false, ispage: true });
					}
				}
			});
		},
		ckselectsp: function(e) {
			var that = this;

			var pat = [];

			if(that.activityInfo.activity_rule.giftbag_quantity <= 0)
			{
				uni.showModal({
					title: '提示',
					content: '当前套餐库存不足，看看别的吧！',
					success: res => {
						uni.navigateTo({
							url:"/activity/giftbag/list"
						})
					}
				});
				return false;
			}

			for(let i in that.activityInfo.activity_rule.item_quantitys)
			{
				pat.push({item_id:i,quantity:that.activityInfo.activity_rule.item_quantitys[i]})
			}

			var params = {
				par: JSON.stringify(pat),
				prd: that.options.pid,
				activity_id: this.activity_id
			};

			that.$.request({
				url: that.Config.URL.cart.batchadd,
				data: params,
				success: function(data, status, msg, code) {
					if (200 == status) {
						uni.showModal({
							title: '提示',
							content: '加入购物车成功！',
							success: res => {
								uni.switchTab({
									url:"../../pages/cart/cart"
								})
							}
						});
					} else {
						uni.showModal({
							title: '提示',
							content: '加入购物车失败！',
							success: res => {
							}
						});
					}
				}
			});
		},

		gotoDetail: function(e) {
			console.log(e)
			var state =  e.currentTarget.dataset.state
			var pid =  e.currentTarget.dataset.pid

			if(state == this.StateCode.PRODUCT_STATE_OFF_THE_SHELF)
			{
				this.$.alert(this.__('此商品不可单独购买'))
			}
			else
			{
				this.$.navigateTo({
					url: "/pagesub/product/detail?id=" + pid
				})
			}
		},

		goCheckout: function() {
			var that = this;
			var items = that.activityInfo.items;

			var pat = [];

      for(var i in items){
        if(items[i]){
          var t = items[i].item_id + '|' + items[i].activity_item_num + '|0'
          pat.push(t)
        }
      }

			var str = pat.join(',');

			that.$.navigateTo({
				url: "/pagesub/checkout/checkout?ifcart=0&cart_id=" + str + "&activity_id=" + that.activity_id
			})

		},
		sub: function() {
			this.unifiedNum(2)
		},
		add: function() {
			this.unifiedNum(1)
		},
		writenum: function(e) {
			this.setData({
				inputval: e.detail.value
			}), this.unifiedNum(3)
		},
		unifiedNum: function(e) {
			let that = this;
			var t = {
				value: parseInt(this.numval),
				stock: parseInt(this.activityInfo.activity_rule.giftbag_quantity),
				inputval: parseInt(this.inputval)
			};
			if (t.stock <= 0) {
				that.$.alert(that.__('亲~商品没有库存啦！'));
				return
			}
			e == 1 ? t.value = t.value + 1 : e == 2 ? t.value = t.value - 1 : (t.value = t.inputval, this.setData({
				numval: t.inputval
			}));
			if (t.value > t.stock) {
				this.setData({
					numval: t.stock
				});
				return
			}
			if (t.value <= 0) {
				this.setData({
					numval: 1
				});
				return
			}
			this.setData({
				numval: t.value
			})
		},

		previewProductImg: function(e) {
			var that = this,
				n = [];

			n.push(this.activityInfo.activity_rule.giftbag_zu_image);


			var i = e.target.dataset.src;

			that.$.previewImage({
				current: i,
				urls: n
			})
		},

		cancelShare: function(e) {
		},
		showCodeImg: function(e) {
		},
		shareQRCode: function(e) {
		},
		saveImg: function(e) {
		},

		onShareBox: function(e) {
			let that = this;
			var $href = that.$.sprintf('%s/tmpl/product_detail.html?item_id=%d&FX=%d', this.Config.WapSiteUrl, this.skuid, this.userInfo
					.user_id);

			$href = that.$.sprintf('%s/h5/activity/giftbag/detail?aid=%d&uid=%d', that.Config.SiteUrl, this.activity_id, this.userInfo.user_id);
			// 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
			// #ifdef APP-PLUS

			// #endif

			// #ifdef MP-WEIXIN
			$href = "/activity/giftbag/detail?aid=" + this.activity_id + "&uid=" + this.userInfo.user_id;
			// #endif

			this.setData({
				shareData: {
					shareTitle: this.activityInfo.activity_name,
					shareText: this.activityInfo.activity_title,
					href: $href,
					image: this.activityInfo.activity_rule.giftbag_image,
					price: this.number_format(this.activityInfo.activity_rule.giftbag_amount, 2)
				}
			});

			// 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
			// #ifdef APP-PLUS
			this.$refs.shareBoxApp.show();
			// #endif

			//海报
			if (e == 3)
			{
				// #ifndef APP-PLUS
				this.$refs.shareBoxMp.show();
				// #endif
			}
			else
			{
				// #ifdef H5
				if (that.$.ifUniApp())
				{
					this.$refs.shareBoxH5.show();
				}
				else
				{
					this.$refs.shareBoxMp.show();
				}
				// #endif
			}




		},
	}
};
</script>

<style lang="scss">
@import '../../styles/_variables.scss';

.page-body {
	padding: 40rpx;


	button {
		margin: 20rpx 20rpx;
	}

	.m-panel-sp-icon {
		position: absolute;
		right: 20rpx;
		top: 10rpx;
	}
}

.fix-titlenview-trans {
	background: #F5F6F7;
}

.m-banner-ad {
	width: 100%;
	height: 640rpx;
	background: rgba(0, 0, 0, 0);
	opacity: 1;

	position: relative;
}

.m-banner-ad swiper {
	width: 100%;
	height: 100%;
}

.slide-image {
	width: 100%;
	height: 100%;
}

.m-activity-info {
	// width: 100%;
	//height: 140rpx;
	background: #FFFFFF;
	opacity: 1;
	padding: 20rpx 24rpx;
}

.m-panel {
	margin-top: 0;
}

	.m-activity-title {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 42rpx;
		color: #002951;
		opacity: 1;

		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;

	}

	.m-activity-tips {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 28px;
		color: #002951;
		opacity: 0.6;

		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;

	}

	.m-activity-price {
		font-size: 34rpx;
		font-family: Arial;
		font-weight: 400;
		line-height: 34rpx;
		color: #FF4142;
		opacity: 1;
		margin-top: 12rpx;
		display: flex;
		flex-direction:row;
		flex-wrap:nowrap;
		justify-content:space-between;

	}


		.product-l {
			// width: 710rpx;
			height: 434rpx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 8rpx;
			margin:20rpx;
			overflow:hidden;
			border-radius: 10rpx;


		}

	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		height: 344rpx;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 240rpx;
		height: 344rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 16rpx;
		margin-right: 24rpx;

	}

	.m-cell {
		padding: 20rpx 20rpx;
	}

	.m-cell-primary {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 36rpx;
		color: #AF6419;
		opacity: 1;

	}

	.m-cell-access .m-cell-ft:after {
		border-color:#AF6419;
	}

	.ft-title {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 32rpx;
		color: #AF6419;
		opacity: 1;
		margin-right: 10rpx;

	}


	.product-l-img {
		width: 240rpx;
		height: 240rpx;
		background: rgba(0, 0, 0, 0);
		opacity: 1;
		border-radius: 16rpx 16rpx 0rpx 0rpx;

	}

	.product-l-price {
		   width:208rpx;
		   height:88rpx;
		   background:rgba(255,255,255,1);
		   padding:8rpx 16rpx;

      .product_name {
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 28rpx;
        color: #002951;
        opacity: 1;


        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }

      .m-project-tips {
        height: 18rpx;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 18rpx;
        color: #002951;
        opacity: 0.6;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        margin:4rpx 0rpx;

      }

      .price-new {
        font-size: 12px;
        font-family: Arial;
        font-weight: 400;
        line-height: 34rpx;
        color: #FF4142;
        opacity: 1;

        padding: 5px 0;
      }
	}


	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		margin-left: 24rpx;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		/* height: 260rpx; */
		// line-height: 300rpx;
		// text-align: center;
		font-size: 36rpx;
	}

	.m-info-sp {
		width: 710rpx;
		height: 48rpx;
		background: #F5F6F7;
		opacity: 1;
		border-radius: 8rpx;
		padding:0 

	}
	
	.u-cart-num {
		margin-top: 0rpx;
		 // height: 100%;
		 line-height: 48rpx;
		 
		width: 56px;
		height: 18px;




	
		 background: #FFFFFF;
		 border: 1px solid #F5F6F7;
		 opacity: 1;
		 border-radius: 2px;

	}
	
	.u-num-btn {
		background: #FFFFFF;
		opacity: 1;
		border-radius: 4rpx;
		width: 22rpx;
		height: 30rpx;
		line-height: 1;
		
		border: 1px solid #F5F6F7;

	}
	
	.m-footer-btn-main {
		width: 100%;
		height: 92rpx;
		background: #DB384C;
		opacity: 1;
		line-height: 92rpx;
		
	
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		// letter-spacing: 40rpx;
		opacity: 1;


	}
	
	.m-footer-btn-item {
		width: 92rpx;
		height: 92rpx;
	}
	
	/*底部按钮 start*/
	.m-footer-btn {
		height: 92rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		text-align: center;
		z-index: 3;
	}
	
	.m-footer-btn-list {
		width: 50%;
		height: 100%;
		position: relative;
		float: left;
		display: flex;
	}
	
	.m-footer-btn-list::before {
		content: ' ';
		position: absolute;
		left: 0;
		top: -2rpx;
		right: 0;
		height: 2rpx;
		border-bottom: 2rpx solid #d5d5d5;
		color: #cccccc;
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		z-index: 3;
	}
	
	.m-footer-btn-item {
		position: relative;
		float: left;
		width: 33.3333333333333%;
		font-size: 24rpx;
		color: #888;
		line-height: 40rpx;
		padding: 15rpx 0;
		border-right: 1rpx solid #d5d5d5;
		box-sizing: border-box;
	}
	
	.m-footer-btn-item::last-child {
		border: none;
	}
	
	.m-footer-btn-icon {
		width: 40rpx;
		height: 40rpx;
		margin: 0 auto;
		position: relative;
	}
	
	.m-footer-btn-item image {
		width: 40rpx;
		height: 40rpx;
	}
	
	.m-footer-btn-item contact-button {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		opacity: 0;
	}
	
	
	
	.m-footer-desable {
		-webkit-filter: grayscale(1);
		filter: grayscale(1);
	}
	
	.u-go-home1 {
		height: 100%;
	}
	
	.video {
		position: absolute;
		bottom: 40rpx;
		left: 44%;
	}
	.m-tab {
		margin-top:6rpx;
	}
	
	
	.m-navbar-item.m-navbar-item-on{
		background-color: #FFFFFF;
		text-align: center;
	}
	
	.old-price {
		    color: #888;
		    margin-left: 5px;
			text-decoration: line-through;
			font-size: 13px;
	}
	
	
	
	
	
	
	
	
	
	


/* share */
.textarea-wrp {
	padding: 0 20rpx;
}

.page-section {
	margin-bottom: 20rpx;
}

.textarea {
	border: 2rpx solid #d8d8d8;
	padding: 10rpx;
	height: 90rpx;
	width: 690rpx;
}

.uni-input {
	border: 2rpx solid #d8d8d8;
	padding: 0 10rpx;
	width: 690rpx;
}

.m-detail {
	// padding:20rpx;
	margin:20rpx;
	background: #F5F6F7;
	border-radius: 20rpx;
}

.m-panel:before {
	    border-top: 0px solid #E5E5E5;
}




.u-cart-num uni-input {
	width: 48rpx;
	height: 36rpx;
	font-size: 26rpx;
}


.m-RichText{
  background: #fff;
  padding: 0 10px 10px;
}

   

</style>
